<template>
  <div>
    <a-menu mode="vertical" @click="handleClick" v-height="heightData" v-width="widthData">
      <a-sub-menu key="sub1">
        <span slot="title"><a-icon type="up" /><span>技术</span></span>
        <a-menu-item key="3">
          <div>
            <ul>
              <p>后端开发</p>
              <li v-for="item in list" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>移动开发</p>
              <li v-for="item in list1" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>前端开发</p>
              <li v-for="item in list2" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>人工智能</p>
              <li v-for="item in list3" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>运维</p>
              <li v-for="item in list5" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>企业软件</p>
              <li v-for="item in list6" :key='item'>{{item}}</li>
            </ul>
          </div>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub2">
        <span slot="title"><a-icon type="pushpin" /><span>产品</span></span>
        <a-menu-item key="7">
          <div>
            <ul>
              <p>后端开发</p>
              <li v-for="item in list" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>移动开发</p>
              <li v-for="item in list1" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>前端开发</p>
              <li v-for="item in list2" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>人工智能</p>
              <li v-for="item in list3" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>运维</p>
              <li v-for="item in list5" :key='item'>{{item}}</li>
            </ul>
          </div>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub3">
        <span slot="title"><a-icon type="fork" /><span>设计</span></span>
        <a-menu-item key="7">
          <div>
            <ul>
              <p>后端开发</p>
              <li v-for="item in list" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>移动开发</p>
              <li v-for="item in list1" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>前端开发</p>
              <li v-for="item in list2" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>人工智能</p>
              <li v-for="item in list3" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>运维</p>
              <li v-for="item in list5" :key='item'>{{item}}</li>
            </ul>
          </div>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub4">
        <span slot="title"><a-icon type="paper-clip" /><span>运营</span></span>
        <a-menu-item key="7">
          <div>
            <ul>
              <p>后端开发</p>
              <li v-for="item in list" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>移动开发</p>
              <li v-for="item in list1" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>前端开发</p>
              <li v-for="item in list2" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>人工智能</p>
              <li v-for="item in list3" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>运维</p>
              <li v-for="item in list5" :key='item'>{{item}}</li>
            </ul>
          </div>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub5">
        <span slot="title"><a-icon type="robot" /><span>市场</span></span>
        <a-menu-item key="7">
          <div>
            <ul>
              <p>后端开发</p>
              <li v-for="item in list" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>移动开发</p>
              <li v-for="item in list1" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>前端开发</p>
              <li v-for="item in list2" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>人工智能</p>
              <li v-for="item in list3" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>运维</p>
              <li v-for="item in list5" :key='item'>{{item}}</li>
            </ul>
          </div>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub6">
        <span slot="title"><a-icon type="build" /><span>销售</span></span>
        <a-menu-item key="7">
          <div>
            <ul>
              <p>后端开发</p>
              <li v-for="item in list" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>移动开发</p>
              <li v-for="item in list1" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>前端开发</p>
              <li v-for="item in list2" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>人工智能</p>
              <li v-for="item in list3" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>运维</p>
              <li v-for="item in list5" :key='item'>{{item}}</li>
            </ul>
          </div>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub7">
        <span slot="title"><a-icon type="code" /><span>职能</span></span>
        <a-menu-item key="7">
          <div>
            <ul>
              <p>后端开发</p>
              <li v-for="item in list" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>移动开发</p>
              <li v-for="item in list1" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>前端开发</p>
              <li v-for="item in list2" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>人工智能</p>
              <li v-for="item in list3" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>运维</p>
              <li v-for="item in list5" :key='item'>{{item}}</li>
            </ul>
          </div>
        </a-menu-item>
      </a-sub-menu>
      <a-sub-menu key="sub8">
        <span slot="title"><a-icon type="compass" /><span>游戏</span></span>
        <a-menu-item key="7">
          <div>
            <ul>
              <p>后端开发</p>
              <li v-for="item in list" :key='item'>{{item}}</li>
            </ul>
            <br>
            <br>
            <ul>
              <p>移动开发</p>
              <li v-for="item in list1" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>前端开发</p>
              <li v-for="item in list2" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>人工智能</p>
              <li v-for="item in list3" :key='item'>{{item}}</li>
            </ul>
            <br>
            <ul>
              <p>运维</p>
              <li v-for="item in list5" :key='item'>{{item}}</li>
            </ul>
          </div>
        </a-menu-item>
      </a-sub-menu>
      <slot></slot>
    </a-menu>
  </div>
</template>
<script>
export default {
  name:'left',
  data(){
    return{
      list:['Java','c++','php','数据挖掘','搜索算法','精准推荐','C','C#','全栈工程师','Hadoop','Python','ASP','VB','后端开发与其他'],
      list1:['HTMLS','Andoroid','iOS','WP','移动开发与其他'],
      list2:['Web前端','Flash','html5','JavaScript','U3D','COCOS2D','前端开发与其他'],
      list3:['深度学习','机器学习','图像处理','语音识别','机器视觉','算法工程师','自然语言处理'],
      list5:['运维工程师','运维开发师','网络工程师','系统工程师','IT支持','IDC','CDN','F5','系统管理员','网络安全','运维其它'],
      list6:['实施工程师','售前工程师','售后工程师','BI工程师','企业软件其他'],
    }
  },
    methods: {
    handleClick(e) {
      console.log('click ', e);
    },
  },

  props:{
    // 搜索框的宽度，默认50%，可任意传值
    heightData:{
      type:String,
      default:'346px'
    },
    widthData:{
      type:String,
      default:'210px'
    },
  },


  directives: {
    'height':{
      bind(el,binding) {
        el.style.height=binding.value
      },
    },
    'width':{
      bind(el,binding) {
        el.style.width=binding.value
      },
    }
  },
}
</script>
<style scoped>
.ant-menu-item{
  width: 600px;
  height: 120%!important;
  float: left;
}
.ant-menu-submenu-title{
  display: flex!important;
  padding-left: 30px!important;
}
.ant-menu-item div ul li{
  float: left;
  padding: 0 5px;
}
.ant-menu-item div ul li:after{
  content: '';
  border-right: 1px solid gray;
  padding: 0 5px;
}
.ant-menu-item div ul li:last-child:after{
  border: none;
}
.ant-menu-item div ul p:hover{
  color: green;
}
.ant-menu-item div ul li:hover{
  color: #42b983;
}
.ant-menu-item:hover, .ant-menu-item-active, .ant-menu:not(.ant-menu-inline) .ant-menu-submenu-open, .ant-menu-submenu-active, .ant-menu-submenu-title:hover {
  color: rgba(0, 0, 0, 0.65)
}
.ant-menu-submenu{
  height: 38px!important;
}
</style>